<template>
  <div>
    <el-dialog
      modal-class="merak_modal"
      v-model="dialogIsShow"
      title="I am the title"
      direction="rtl"
      :before-close="berofreClose"
      width="500"
    >
      <template #header>
        <div class="merak_modal_title">{{$t("archive_set_goods_type.add_goods_type")}}</div>
      </template>

      <div class="">
        <el-form ref="addGoodsGroupFormRef" :model="classIdFormData" :rules="classIdFormDataRules" label-position="top">
          <el-form-item :label="classIdFormData.class.label" prop="class.value">
            <el-input     maxlength="100" class="qf_input" v-model="classIdFormData.class.value" :placeholder="$t('archive_set_goods_type.placeholder_group_name_ru')" />
          </el-form-item>
          <el-form-item :label="classIdFormData.class_cn.label" prop="class_cn.value">
            <el-input   maxlength="100" class="qf_input" v-model="classIdFormData.class_cn.value" :placeholder="$t('archive_set_goods_type.placeholder_group_name_cn')" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button type="default" @click="goodsGroupDialogcancelFn()">{{$t('merak.cancel')}}</el-button>
        <el-button type="primary" @click="goodsGroupDialogConfirmFn()">{{$t('merak.confirm')}}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted } from "vue";
const addGoodsGroupFormRef = ref();
const dialogIsShow = inject("dialogIsShow");
const goodsGroupFormRef = inject("goodsGroupFormRef");
const classIdFormData = inject("classIdFormData");
const classIdFormDataRules = inject("classIdFormDataRules");
const goodsGroupDialogcancelFn = inject("goodsGroupDialogcancelFn");
const goodsGroupDialogConfirmFn = inject("goodsGroupDialogConfirmFn");

const berofreClose = () => {
  goodsGroupDialogcancelFn();
};
onMounted(() => {
  goodsGroupFormRef.el = addGoodsGroupFormRef;
});
</script>
<style lang="scss" scoped>
</style>